<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>product-detail</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
      <link rel="stylesheet" href="../css/all.css" />
		<link rel="stylesheet" href="../css/previewImage.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav own-header-hidden own-main-background-color">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left own-left-nav-color"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<div class="mui-content">
			<div id="detailcontent" class="mui-content  own-content-padding">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop" id="slider-imgage">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					</div>
				</div>
				<div id="sidler_ul"></div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab" id="bar">
				<a class="mui-tab-item mui-active" href="index.html" data-id='0'>
					<span class="mui-icon mui-icon-chat"></span>
					<span class="mui-tab-label">客服</span>
				</a>
				<a class="mui-tab-item" href="/home/tixing.html" data-id="1">
					<span class="mui-icon mui-icon-chat">
											</span>
					<span class="mui-tab-label">店铺</span>
				</a>
				<a class="mui-tab-item" href="/home/self.html"  id="showgouwuche" >
					<span class="mui-icon iconfont icon-gouwuche">
						<span class="mui-badge mui-badge-warning" id="gouwuche">0</span>
					</span>
					<span class="mui-tab-label">购物车</span>
				</a>
					<a class="mui-tab-item bgcoloe-red"  id="addgouwuche">
					<span class="own-baise">
						加入购物车</span>
				</a>
			</nav>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.previewImage();
			mui.init({
				swipeBack: false
			});
			mui.preload({
				url:'../barItem/category.html',
				id:'category.html'
			})
			var self;
			var slider_;
			var slider_imgage;
			var sidler_ul;
			var divload;
			var bar;
			var orderpage;
			mui.plusReady(function() {
			    divload="<div class='mui-loading'>加载中....<div>";
				self = plus.webview.currentWebview();
				slider_ = mui("#slider");
     			slider_imgage = document.getElementById("slider-imgage");
				sidler_ul = document.getElementById("sidler_ul");
				bar = document.getElementById("bar");
				document.getElementById("addgouwuche").addEventListener("tap",function()
				{
					//首先判断是否有登录
					if(!localStorage.getItem('user'))
					{
						//调到登录
						mui.openWindow({
							url:'../main/login.html',
							id:'login'
						})
					}else
						addGouWuChe();
				})
				document.getElementById("showgouwuche").addEventListener("tap",function()
				{	
				 orderpage=plus.webview.create("../barItem/category.html","category","");
                 orderpage.show("fade-in",300);
				})
			})

			
			window.addEventListener("loadcontent", function(e) {
	
				sidler_ul.innerHTML =divload;
				setTimeout(function()
				{
				bar.style.display="block";
					//第一步加载图片
				var name = e.detail.name;
				var imgsrc = "../k/" + name + "_";
				setImages_Slider(imgsrc)
				slider_.slider({
					interval: 0
			 	});
			 
				 setHTML_Silder();
				},150)
				
			})

			function setHTML_Silder() {
				var html = '<div class="mui-table">\
					             <div class="mui-table-cell mui-col-xs-12">\
								  <ul class="mui-table-view">\
									<li class="mui-table-view-cell">\
											<h5>尊首 2016春夏装新款韩版女装背带裙打底衫两件套连衣裙女长裙套装YF3612 灰色 L</h5>\
											<h5 class="own-red">【新品】【送袜子两双】【送运费险，退换货有限公司赔付运费】</h5>\
											<h5 class="own-main-price">￥150.0</h5>\
									</li>\
									<li class="mui-table-view-cell">\
								  	 <p class="mui-navigate-right">\
											<h5 class="own-text-through">促销<font color="red">特价</font>乔丹专卖店</h5>\
										</p>\
									</li>\
									<li class="mui-table-view-cell">\
										 <span class="mui-navigate-right">\
										 	 <h5 class="own-black "><span class="own-marging-right">已选</span>黑色、42&nbsp;&nbsp;1件&nbsp;&nbsp;可选延保</h5>\
									<span>\
									</li>\
									<li class="mui-table-view-cell">\
										 	 <h5 class="own-black"><span class="own-marging-right">送至</span>湖北>武汉市>武昌区>中南路街道<span class="mui-icon mui-icon-location-filled"></span></h5>\
										 	 <h5 class="own-red" ><span class="own-marging-left">现货</span></h5> \
									         <h5 class="own-black"><span class="own-marging-right">运费</span>店铺单笔订单不满60元,收运费15元</h5>\
									         <h5 class="own-black"><span class="own-marging-right">服务</span>由乔丹专卖店从xxxxx提供售后服务</h5>\
									         <h5><span class="own-marging-left"><span class="mui-icon mui-icon-map"></span><span class="own-marging-right">货到付款</span><span class="mui-icon mui-icon-navigate"></span>送保险</h5>\
									      <h5 class="own-black"><span class="own-marging-right">提示</span>支持7天无理由退货</h5>\
									</li>\
									<li class="mui-table-view-cell">\
										 	 <h5 class="own-black">评价晒单</h5>\
										 	  <h5>好评&nbsp;<span class="own-red own-marging-right">96%</span>5702人评论</h5>\
									</li>\
									<li class="mui-table-view-cell">\
										 	 <h5>\
										 	 	<span class="mui-icon mui-icon-star-filled"></span>\
										 	 	<span class="mui-icon mui-icon-star-filled"></span>\
										 	 	<span class="mui-icon mui-icon-star-filled"></span>\
										 	 	<span class="mui-icon mui-icon-star-filled"></span>\
										 	 	<span class="mui-pull-right">2016-01-01 19:00</span>\
										 	 </h5>\
										 	  <h5>鞋子很不错，下次还回来买</h5>\
									</li>\
								</ul>\
							</div>\
							</div>';
				sidler_ul.innerHTML = html;
			}
			function setImages_Slider(imgsrc) {
				var img = '<div class="mui-slider-item mui-slider-item-duplicate">\
					<a href="#">\
						<img src="' + imgsrc + '1.jpg" data-preview-src="" data-preview-group="1">\
					</a>\
				  </div>\
					<div class="mui-slider-item">\
						<a href="#">\
								<img src="' + imgsrc + '1.jpg" data-preview-src="" data-preview-group="1">\
						</a>\
					</div>\
					<div class="mui-slider-item">\
						<a href="#">\
								<img src="' + imgsrc + '2.jpg" data-preview-src="" data-preview-group="1">\
						</a>\
					</div>\
					<div class="mui-slider-item">\
						<a href="#">\
									<img src="' + imgsrc + '3.jpg" data-preview-src="" data-preview-group="1">\
						</a>\
					</div>\
					<div class="mui-slider-item">\
						<a href="#">\
									<img src="' + imgsrc + '4.jpg" data-preview-src="" data-preview-group="1">\
						</a>\
					</div>\
					<div class="mui-slider-item mui-slider-item-duplicate">\
						<a href="#">\
								<img src="' + imgsrc + '1.jpg" data-preview-src="" data-preview-group="1">\
						</a>\
					</div>';
				slider_imgage.innerHTML = img;
			}
			mui.back = function() {
				bar.style.display="none"
				sidler_ul.innerHTML = "";
				slider_imgage.innerHTML = "";
			    self.hide("fade-out",300);
			}
			
			window.addEventListener("login",function()
			{
				addGouWuChe();
			})
			var order=new Array();
			function addGouWuChe()
			{ 
//				 var object=localStorage.getItem("order");
     			  localStorage.removeItem("order");
				  plus.nativeUI.showWaiting();
				  var product=document.getElementById("gouwuche");
			 	   var productnum=product.innerText;
			 	   var Count=parseInt(productnum)+1;
			       product.innerText=Count;
			       plus.nativeUI.closeWaiting();
			       var index=plus.webview.currentWebview().opener().opener();
			       mui.fire(index,"updateProduct")
			       var order_={
			       	productid:'p-1',
			       	orderurl:'#',
			       	name:'【韩版潮流，女装】',
			       	price:'18.0',
			       	num:'1',
			       	dianpuname:'三只松鼠旗舰店',
			       	imgurl:'',
			       };
			       var result=true;
//			       mui.each(object,function(index,item)
//			       {
//			       	if(item.productid==order_.productid)
//			       	  {
//			       	    item.num++;
//			       	    result=true;
//			       	    break;
//			       	   }
//			       	    else
//			       	    {
//			       	       result=false;
//			       	    }
//			       })
			    
			        localStorage.setItem("order",JSON.stringify(order_));
			       
			}
		</script>
	</body>

</html>